<template>
  <div style="box-sizing: border-box; padding-top: 20vh; height: 100vh; background-image: linear-gradient(315deg, #eec0c6 0%, #7ee8fa 74%);">
    <img alt="Vue logo" src="./assets/logo.png" /><br/>
    <!-- <iframe src="./assets/html/test.html" frameborder="0"></iframe> -->
    <Com/>
    <router-link to="/">setup</router-link>
    |<router-link to="/other">other</router-link>
    |<router-link to="/vuex">vuex</router-link> 
   
   
    <router-view v-if="$route.name == 'other'" msg = '传递给子组件'  @myclick = "func1"></router-view>
    <router-view v-else></router-view>
  </div>
  </template>
  
  
  <script setup>
  import { provide } from '@vue/runtime-core';
  import Com from './components/com.vue';
  const func1 = () => {
    console.log('hello this is emit')
  }
  const ftext = provide('fatherData','xxxxxx')
  </script>
  <style>
  body, html{
    padding: 0;
    margin: 0;
    border: 0;
  }
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
  }
  </style>
  